<!-- <template>
    <div class="search">
        <div class="search-container">
            <el-input placeholder="请输入内容" v-model="searchQuery" class="search-input" @keyup.enter="onSearch"
                suffix-icon="search">
            </el-input>
        </div>
    </div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            searchQuery: '',
            backgroundStyle: {
                backgroundSize: 'cover',
                height: '100vh',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center',
                position: 'relative'
            }
        }
    },
    methods: {
        onSearch() {
            console.log(`Searching for: ${this.searchQuery}`);
            // 这里可以添加搜索逻辑
        },
        goToUserCenter() {
            console.log('Going to user center');
            // 跳转到个人中心逻辑
        }
    }
}
</script>

<style scoped>
.search {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    height: 100vh;
    /* 设置容器高度为视口高度 */
}

.search-container {
    width: 60%;

    .search-input {
        width: 100%;
        /* 设置搜索框的宽度 */
        height: 70px;
        /* 设置搜索框的高度 */
        border-radius: 70px;
        border-radius: 20px;
        /* 设置圆角 */
        transition: border-color 0.3s;
        /* 添加边框颜色变化的过渡效果 */
    }
}



.search-input:focus {
    border-color: #409eff;
    /* 设置聚焦时的边框颜色 */
}

@keyframes flashing-border {
    0% {
        border-color: #409eff;
    }

    50% {
        border-color: #66b1ff;
    }

    100% {
        border-color: #409eff;
    }
}

.search-input.flashing {
    animation: flashing-border 2s infinite;
    /* 添加动画效果 */
}

.user-center {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}
</style> -->


<template>
    <div class="search-container">
      <input type="text" v-model="searchKeyword" placeholder="请输入搜索内容" @input="onInput" />
      <button @click="onSearch">搜索</button>
      <div class="hot-search" v-if="hotSearch.length > 0">
        <h4>热门搜索</h4>
        <ul>
          <li v-for="item in hotSearch" :key="item" @click="selectKeyword(item)">{{ item }}</li>
        </ul>
      </div>
      <div class="history-search" v-if="historySearch.length > 0">
        <h4>历史搜索</h4>
        <ul>
          <li v-for="item in historySearch" :key="item" @click="selectKeyword(item)">{{ item }}</li>
        </ul>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        searchKeyword: '',
        hotSearch: ['苹果', '华为', '小米'],
        historySearch: JSON.parse(localStorage.getItem('historySearch') || '[]')
      };
    },
    methods: {
      onSearch() {
        if (this.searchKeyword.trim() !== '') {
          this.historySearch.push(this.searchKeyword);
          localStorage.setItem('historySearch', JSON.stringify(this.historySearch));
          // 触发搜索逻辑
          console.log('搜索关键词：', this.searchKeyword);
        }
      },
      onInput() {
        // 输入时可以做一些实时搜索的逻辑
      },
      selectKeyword(keyword) {
        this.searchKeyword = keyword;
        this.onSearch();
      }
    }
  };
  </script>
  
  <style scoped>
  .search-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }
  
  input {
    width: 300px;
    height: 40px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 10px;
  }
  
  button {
    width: 100px;
    height: 40px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #0056b3;
  }
  
  .hot-search, .history-search {
    margin-top: 20px;
  }
  
  ul {
    list-style: none;
    padding: 0;
  }
  
  li {
    cursor: pointer;
    padding: 5px 10px;
    border-bottom: 1px solid #eee;
  }
  
  li:hover {
    background-color: #f5f5f5;
  }
  </style>